import React, {Component} from "react";
import {connect} from "dva";
import time, {convertDateFromString, currentTime, dateFormat} from "@/utils/time";
import {addResizeHook} from "@/utils/resize";
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import {Row, Col, Card} from "antd";
import moment from "moment";
import CokeFuel from "./CokeFuel";
import FuelParam from "./FuelParam";
import OreFuel from "./OreFuel";
import {getLatestTime} from "@/services/indicator";


class RawFuelTracking extends Component {

  state = {

    chart: null,
    startTime: time.getStartOfDay(),
    endTime: time.getEndOfDay(),
    globalTime: {
      currentTime: null
    },
    // timeBetween: [time.getStartOfDay(), time.getEndOfDay()],
  };

  getTime = async () => {
    const resp = await getLatestTime({
      itemName: "HanFan",
    });
    const {start, end, current} = resp.detail
    let startTime = convertDateFromString(start)
    let endTime = convertDateFromString(end)
    let currentTime = convertDateFromString(current)

    const payload = {
      start: startTime,
      end: endTime,
      current: currentTime
    };
    return payload
  }

  componentDidMount() {
    this.getRawFuelTrackingData();
    this.getCurrentData();
  }

  getCurrentData() {
    this.props.dispatch({
      type: 'hanfan/currentData'
    })
  }

   getRawFuelTrackingData =async () =>{
    const payload =await this.getTime()
    const current = payload.current;
    this.props.dispatch({
      type: 'hanfan/fuelTracking',
      payload:{
        end: dateFormat(current)
      }
    })
  };

  render() {
    const {
      width = 100,
      height = 300,
      fuelTracking
    }
      = this.props;

    return (
      <div>
        <Row>
          <Col span={8} style={{paddingRight: 8}}>
            <Card
              style={{width:'100%'}}
              bordered={false}
            >
              <OreFuel
                chartId='oreFuel'
                width={width}
                height={height}
                data={fuelTracking}
              />
            </Card>
          </Col>
          <Col span={8} style={{paddingRight: 8}}>
            <Card
              style={{width:'100%'}}
              bordered={false}
            >
              <FuelParam
                chartId='fuelParam'
                width={width}
                height={height}
              />
            </Card>
          </Col>
          <Col span={8} style={{paddingRight: 8}}>
            <Card
              style={{width:'100%'}}
              bordered={false}
              >
              <CokeFuel
                chartId='cokeFuel'
                width={width}
                height={height}
                data={fuelTracking}
              />
            </Card>
          </Col>
        </Row>
      </div>
    )
  }
}


export default connect(({hanfan, loading, global}) => ({
  fuelTracking: hanfan.fuelTracking,
  globalTime: hanfan.globalTime,
  global
}))(RawFuelTracking);
